<template>
  <div>
    <div class="wrapper">
      <div class="p">请选择您要购买的商品类型:</div>
      <div class="wrapper_select">
        <div class="select">
          <div class="item">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yingyong" />
            </svg>

            <div class="name">任意购</div>
          </div>

          <div class="item">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiubei" />
            </svg>

            <div class="name">酒便利</div>
          </div>
          <div class="item">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-haixian" />
            </svg>

            <div class="name">全日鲜</div>
          </div>

          <div class="item">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-COFFEETOGO" />
            </svg>

            <div class="name">星巴克</div>
          </div>
          <div class="item">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zu" />
            </svg>

            <div class="name">医药</div>
          </div>
          <div class="item">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-meishi" />
            </svg>

            <div class="name">美食</div>
          </div>
          <div class="item">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shucai" />
            </svg>

            <div class="name">蔬菜</div>
          </div>
        </div>
      </div>
      <div class="btn_gobuy">去下单</div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped lang='less'>
* {
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 95vw;
  height: 50vw;
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  // top: 128vw;
  overflow: hidden;
  // border: 1px solid red;
  border-radius: 2px 2px 0 0;
  margin-left: 2vw;
  background: #fff;
  bottom: 0;
}
.p {
  font-size: 4vw;
  line-height: 15vw;
  letter-spacing: 0vw;
  color: #666666;
  padding-left: 4vw;
  padding-bottom: 5vw;
}
.wrapper_select {
  overflow: hidden;
  overflow-x: scroll;
  // border: 1px solid blue;
}
.wrapper_select::-webkit-scrollbar {
  display: none;
}
.select {
  overflow: hidden;
  width: 150vw;
  height: 15vw;
  float: left;
  display: inline-block;
  .item {
    float: left;
    width: 12vw;
    height: 12vw;
    margin: 0 4.5vw;
    text-align: center;

    .name {
      margin-left: -4px;
    }
    .icon {
      display: block;
      width: 10vw;
      height: 10vw;
    }
  }
}

.item .name {
  font-size: 3vw;
  font-weight: normal;
  font-stretch: normal;
  line-height: 5vw;
  letter-spacing: 0vw;
  color: #1a1a1a;
}
.btn_gobuy {
  width: 95vw;
  height: 13vw;
  line-height: 12vw;
  background-color: #222222;
  box-shadow: 0vw 0vw 2vw 0vw rgba(0, 0, 0, 0.2);
  border-radius: 1vw;
  color: #fff;
  text-align: center;
  //   margin:0 1vw;
  font-size: 5vw;
  margin-top: 0.4vh;
}
</style>